@charset "UTF-8";
/**
 * 
 * @authors 3pixel (kermit@piexl.net)
 * @date    2017-11-30 12:01:00
 * @version v0.0.1
 */
//引入变量
@import "variable.less";

//引入混合函数
@import "mixins.less";

.page-banner{
	width:100%;
	position:relative;
	font-size:0;
	line-height:0;
	@media screen and (max-width:1024px){
		.banner-img{display:none;}
		padding:60px 0;
		background:url(../images/example/fleet_banenr.jpg) no-repeat center center;
		background-size:cover;
	}
	.banner-text{
		position:absolute;
		bottom:40px;
		right:234/1920*100%;
		background-color:rgba(0, 0, 0, 0.52);
		padding:60px;
		width:630px;
		font-size:16px;
		line-height:1.5;
		color:#fff;
		@media screen and (max-width:1680px){padding:52px;}
		@media screen and (max-width:1366px){padding:48px;}
		@media screen and (max-width:1024px){
			width:60%;
			padding:46px;
			.banner-img{display:none;}
			position:static;
			margin-left:auto;
			margin-right:auto;
		}
		@media screen and (max-width:768px){width:80%; padding:40px;}
		@media screen and (max-width:480px){width:80%; padding:60*@rpx;}
		.text-header{
			text-align:center;
			&::after{
				content:'';
				display:inline-block;
				width:2em;
				height:2px;
				background-color:#fff;
				margin:1em auto;
			}
			p{
				font-size:18px;
				@media screen and (max-width:1366px){font-size:16px;}
				@media screen and (max-width:1024px){font-size:14px;}
			}
		}
		.page-title{
			font-weight:normal;
			font-size:48px;
			line-height:1.2;
			@media screen and (max-width:1680px){font-size:42px;}
			@media screen and (max-width:1366px){font-size:40px;}
			@media screen and (max-width:1024px){font-size:36px;}
			@media screen and (max-width:768px){font-size:30px;}
			@media screen and (max-width:480px){font-size:28px;}
		}
		.describe{.text-overflow-lines(4,1.5em)}
	}
}

//幻灯片头
.page-swiper-banner{
	.fleet-swiper{
		width:1222/1920*100%;
		.swiper-slide{
			width:100%;
			height:100%;
			background:url(../images/example/fleet_swiper_img.jpg) no-repeat center center;background-size:cover;
			a{display:block; width:100%; height:100%; font-size:0; line-height:0;}
		}
		.swiper-tip{
			position:absolute;
			bottom:38px;
			right:45px;
			z-index:9;
		}
		.swiper-pagination{
			position:static;
			width:auto;
			display:inline-block;
			padding-left:1em;
			padding-right:1em;
			font-size:14px;
			line-height:0;
			float:left;
			.swiper-pagination-bullet{
				width:3px;
				height:3px;
				margin:0 5px;
				text-indent:-999em;
				background-color:#fff;
				opacity:1;
				&.swiper-pagination-bullet-active{
					text-indent:0;
					font-size:16px;
					line-height:30px;
					width:auto;
					height:30px;
					background-color:transparent;
					color:#fff;
					border-bottom:3px solid #fff;
					.border-radius(0);
					font-family:'Conv_Oswald-Regular','Microsoft YaHei';
				}
			}
		}
		.fleet-button-prev,.fleet-button-next{
			float:left;
			display:inline-block;
			color:#fff;
			cursor:pointer;
			text-align:center;
			i{font-size:30px;}
			&.swiper-button-disabled{
				opacity:0.5;
			}
		}
	}
	.fleet-info{
		width:698/1920*100%;
		background-color:#1e1d1b;
		position:relative;
		padding:84px 120px;
		color:#fff;
		font-size:16px;
		&::after{
			@arrowWidth:32px;
			display:block;
			content:'';
			width:0;
			height:0;
			border:@arrowWidth solid transparent;
			border-left-color:#1e1d1b;
			position:absolute;
			right:-@arrowWidth*2;
			top:50%;
			z-index:99;
			margin-top:-@arrowWidth;
		}
		.info-name{
			&::after{
				content:'';
				display:block;
				width:4em;
				height:3px;
				margin:2em 0;
				background-color:#fff;
			}
			.fleet-zh-name{
				font-size:52px;
				line-height:1;
				margin-bottom:0.2em;
				font-weight:normal;
			}
			.fleet-en-name{
				font-size:32px;
				line-height:1;
				font-weight:normal;
			}
		}
		.info-features{
			color:#fff;
			list-style:disc;
			padding:1em 0;
			padding-left:1em;
			line-height:2;
			margin-bottom:40px;
			li{list-style:disc;}
		}
		.info-volume{
			color:#8a8a89;
			font-size:18px;
			.text-red{font-size:24px;}
			.volume-item{
				width:100%/3;
				float:left;
				text-align:center;
				&:not(:last-child){
					border-right: 1px  solid #292826;
				}
			}
			.volume-icon{
				display:inline-block;
				border:3px solid #8a8a89;
				font-size:46px;
				margin-bottom:10px;
				padding:0.2em;
				.border-radius(50%);
			}
		}
	}
	@media screen and (max-width:1680px){
		.fleet-info{
			padding:70px 100px;
			.info-name{
				&::after{
					margin:1.5em 0;
				}
				.fleet-zh-name{font-size:50px;}
				.fleet-en-name{font-size:30px;}
			}
			.info-features{
				margin-bottom:30px;
			}
			.info-volume{
				font-size:16px;
				.text-red{font-size:22px;}
				.volume-icon{font-size:42px;}
			}
		}
	}
	@media screen and (max-width:1366px){
		.fleet-info{
			padding:50px 80px;
			.info-name{
				&::after{
					margin:1.5em 0;
				}
				.fleet-zh-name{font-size:48px;}
				.fleet-en-name{font-size:24px;}
			}
			.info-features{
				margin-bottom:30px;
			}
			.info-volume{
				font-size:14px;
				.text-red{font-size:20px;}
				.volume-icon{font-size:40px; border-width:2px;}
			}
		}
	}
	@media screen and (max-width:1024px){
		.fleet-swiper{
			width:100%;
			float:none;
		}
		.fleet-info{
			width:100%;
			float:none;
			&::after{
				@arrowWidth:26px;
				right:inherit;
				top:-@arrowWidth*2;
				left:50%;
				border:@arrowWidth solid transparent;
				border-left-color:transparent;
				border-bottom-color:#1e1d1b;
				right:-@arrowWidth*2;
				margin-top:0;
			}
			.info-name{
				.fleet-zh-name{font-size:40px;}
				.fleet-en-name{font-size:20px;}
			}
			.info-features{
				margin-bottom:1em;
			}
		}
	}
	@media screen and (max-width:768px){
		.fleet-info{
			padding:60*@rpx 80*@rpx;
			font-size:14px;
			&::after{
				@arrowWidth:20px;
				right:inherit;
				top:-@arrowWidth*2;
				left:50%;
				border:@arrowWidth solid transparent;
				border-left-color:transparent;
				border-bottom-color:#1e1d1b;
				right:-@arrowWidth*2;
				margin-top:0;
			}
		}
	}
}

//舰队主体
.fleet-content{
	padding-top:76px;
	padding-bottom:76px;
	@media screen and (max-width:1270px){
		padding-top:70px;
		padding-bottom:70px;
	}
	@media screen and (max-width:1024px){
		padding-top:60px;
		padding-bottom:60px;
	}
	@media screen and (max-width:768px){
		padding-top:76*@rpx;
		padding-bottom:76*@rpx;
	}
}

//船队列表
.fleet-list{
	margin-left:-15px;
	margin-right:-15px;
	.clearfix();
	@media screen and (max-width:480px){margin-left:0; margin-right:0;}
	.item{
		float:left;
		width:100%/2;
		padding:0 15px;
		margin-bottom:70px;
		@media screen and (max-width:768px){margin-bottom:70*@rpx; padding:0 15*@rpx;}
		@media screen and (max-width:480px){width:100%; padding:0 15*@rpx; padding-left:0; padding-right:0;}
		.item-inner{box-shadow: 0px 5px 21.6px 2.4px rgba(46, 46, 46, 0.1);}
		.item-header{
			display:block;
			font-size:0;
			line-height:0;
			position:relative;
			color:#fff;
			&::before{
				content:'';
				display:block;
				width:100%;
				height:100%;
				position:absolute;
				top:0;
				left:0;
				.transition(all,2s,ease,0s);
				background-color:rgba(0, 0, 0, 0.2);
			}
			&:hover{
				&::before{
					background-color:rgba(0, 0, 0, 0);
				}
			}
			.icon-link{
				font-size:28px;
				padding:0.2em 1em;
				display:inline-block;
				.border-radius(3em);
				line-height:1;
				border:2px solid #fff;
				position:absolute;
				bottom:0;
				right:0;
				i{line-height:1;}
				@media screen and (max-width:1024px){font-size:24px;}
				@media screen and (max-width:768px){font-size:20px;}
				@media screen and (max-width:480px){font-size:18px;}
			}
			.fleet-name{
				position:absolute;
				left:0;
				bottom:0;
				width:100%;
				padding:1em 1.2em;
				font-size:18px;
				line-height:1.5;
				@media screen and (max-width:1024px){font-size:16px;}
				@media screen and (max-width:768px){font-size:16px;}
				.fleet-name-inner{
					position:relative;
					padding-right:100px;
					@media screen and (max-width:1024px){padding-right:72px;}
					@media screen and (max-width:768px){padding-right:60px;}
				}
				.zh-name{
					font-size:32px;
					font-weight:normal;
					@media screen and (max-width:1680px){font-size:30px;}
					@media screen and (max-width:1366px){font-size:28px;}
					@media screen and (max-width:1024px){font-size:24px;}
					@media screen and (max-width:768px){font-size:20px;}
				}
				.en-name{font-weight:normal;}
			}
			&:hover{
				.icon-link{
					background-color:@red;
					border-color:@red;
				}
			}
		}
		.item-footer{
			padding:1.5em 1em;
			font-size:16px;
			color:#333;
			line-height:2;
			background-color:#fff;
			.item-describe{
				margin-bottom:1em;
				line-height:1.5;
				.text-overflow-lines(2, 1.5em);
			}
			.item-features{
				font-size:14px;
				color:#999;
				line-height:1.5;
				.text-overflow-lines(2, 1.5em);
				span{padding-right:0.5em;}
				i{padding-right:0.3em; color:@red;}
			}
			.fleet-lines{
				color:#666; font-size:20px;
				@media screen and (max-width:1024px){font-size:20px;}
				@media screen and (max-width:768px){font-size:18px;}
				@media screen and (max-width:480px){font-size:14px;}
			}
		}
	}
}


.route-list{
	padding-top:40px;
	@media screen and (max-width:1024px){padding-top:30px;}
	@media screen and (max-width:768px){padding-top:20*@rpx;}
}